<template>
    <div class="filter">
        <el-row>
            <el-col :span="4">拼音首字母查找</el-col>
            <el-col :span="20">
                <ul class="filter-lis letters">
                    <li v-for="(item, index) in sanCatList" :key="index" :class="{active: item.title === activeLetter}"
                        @click="handleSelect(item.title)">
                        {{ item.title.toUpperCase() }}
                    </li>
                </ul>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4">热门分类</el-col>
            <el-col :span="20">
                <ul class="filter-lis">
                    <li v-for="item in hotCategoryList" :key="item.cat_id"
                        :class="{ active: item.cat_id === activeCategory }"
                        @click="params.cid = item.cat_id; activeCategory = item.cat_id">
                        {{ item.name }}
                    </li>
                </ul>
            </el-col>
        </el-row>
        <el-scrollbar ref="scrollSanCatRef" @ready="scrollbarReady"
            style="min-height:calc(51px * 4);max-height:300px;width:100%;" :wrapStyle="[{ 'overflow-x': 'hidden' }]">
            <el-row v-for="(item, index) in VUEX_sanCatList" :key="index" :id="'anchor-' + item.title.toLowerCase()">
                <el-col :span="4" :class="{ active: item.title === activeLetter }">
                    {{ item.title.toUpperCase() }}</el-col>
                <el-col :span="20">
                    <ul class="filter-lis">
                        <li v-for="rs in item.ch" :key="rs.cat_id" :class="{ active: rs.cat_id === activeCategory }"
                            @click="params.cid = rs.cat_id; activeCategory = rs.cat_id">
                            {{ rs.name }}
                        </li>
                    </ul>
                </el-col>
            </el-row>
        </el-scrollbar>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { getHotList, getSanCatList } from "@/api/apis"
export default {
    name: "filters",
    components: {
    },
    props: {
        // 如果需要，可以通过 props 接收初始的 cid 值
        initCid: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            activeCategory: '', // 当前分类
            hotCategoryList: [], // 热门分类列表

            sanCatList: [], // 三级分类列表

            // 拼音首字母查找
            activeLetter: '',
            letters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
            params: {
                cid: this.initCid,
            }
        }
    },
    computed: {
        ...mapGetters(['categoryList', 'VUEX_sanCatList']),
    },
    created () {
        const cid = this.$route.query.cid
        if (cid) {
            this.activeCategory = cid;
        }
        this.getHotListData();
        //this.getSanCatList();
    },
    watch: {
        // 监听 cid 的变化
        'params.cid' (newCid) {
            // 当 cid 变化时，触发事件并传递新的 cid 值
            this.$emit('update:cid', newCid)
        }
    },
    methods: {
        updateCid (newCid) {
            // 方法用于更新 cid 值
            this.params.cid = newCid
        },
        // el-scrollbar内滚动条滚动到指定的标题号
        handleSelect(index) {
            this.activeLetter = index;
            this.$nextTick(() => {
                let div = this.$refs['scrollSanCatRef'].$refs['wrap']
                let el = document.getElementById(`anchor-${index.toLowerCase()}`)//滚动到哪 
                let top = el.offsetTop
                div.scrollTo({ behavior: "smooth", top: top })
            })

        },
        scrollbarReady(instance) {
            // 可以在这里获取到 scrollbar 实例
            this.scrollbarInstance = instance
        },
        // 获取热门分类
        getHotListData() {
            let that = this
            getHotList().then((res) => {
                if (res.code === 1) {
                    that.hotCategoryList = res.data
                }
            })
        },
        // 暂时废弃 已在main.js中获取 存入vuex
        // 获取三级分类列表
        /* getSanCatList() {
            let that = this
            getSanCatList().then((res) => {
                if (res.code === 1) {
                    that.sanCatList = res.data
                }
            })
        } */
    }
}
</script>

<style lang="less" scoped>
.filter {
    font-size: 14px;
    border: 1px solid rgba(112, 112, 112, 0.10);
    background-color: #fff;

    .el-row {
        display: flex;
        align-items: center;
    }

    .el-row:not(:last-child) {
        border-bottom: 1px solid rgba(46, 48, 51, .1)
    }

    .el-col-4 {
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: rgba(217, 217, 217, 0.10);
        &.active {
            color: #EF312A;
        }
    }

    .el-select+.el-select {
        margin-left: 15px;
    }

    .filter-lis {
        li {
            list-style: none;
            display: inline-block;
            padding: 0 15px;
            cursor: pointer;

            &:hover,
            &.active {
                color: #EF312A;
            }
        }

        &.letters {
            li {
                border-radius: 4px;
                padding: 0 6px;
                margin-left: 15px;

                &.active {
                    color: #fff;
                    background-color: #EF312A;
                }
            }
        }
    }
}
</style>